<template>
  <div style="width: 220px">
    <el-input
      v-model="addProductAttrValue"
      style="width: 160px;"
      clearable
      @keyup.enter.native="handleAddProductAttrValue"
    />
    <el-button class="littleMarginLeft" type="success" @click="handleAddProductAttrValue">增加</el-button>
    <br>
    <el-tag
      v-for="(item,index) in value"
      :key="item"
      closable
      style="margin-right: 10px; clear：left(right，both)"
      @close="delTag(index)"
    >
      {{ item }}
    </el-tag>
  </div>
</template>

<script>
export default {
  name: 'AddNatureInput',
  model: {
    prop: 'value'
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: {
      type: Array
    }
  },
  data() {
    return {
      addProductAttrValue: ''
    }
  },
  methods: {
    handleAddProductAttrValue() {
      const options = this.value
      if (this.addProductAttrValue == null || this.addProductAttrValue === '') {
        this.$message({
          message: '属性值不能为空',
          type: 'warning',
          duration: 1000
        })
        return
      }
      if (options.indexOf(this.addProductAttrValue) !== -1) {
        this.$message({
          message: '属性值不能重复',
          type: 'warning',
          duration: 1000
        })
        return
      }
      this.value.push(this.addProductAttrValue)
      this.addProductAttrValue = null
    },
    delTag(index) {
      this.value.splice(index, 1)
    }
  }
}
</script>

<style scoped>

</style>
